<template>
  <view class="orders">
    <view class="orders-nav">
      <u-tabs
        active-color="#000000"
        inactive-color="#999999"
        bar-height="2"
        bar-width="60"
        height="65"
        :list="orderStates"
        @change="navChange"
        :current="activeState"
      ></u-tabs>
      <!-- <u-tabs-swiper
        ref="uTabs"
        active-color="#000000"
        inactive-color="#999999"
        bar-height="2"
        bar-width="60"
        height="40"
        :list="orderStates"
        :is-scroll="false"
        :current="activeState"
        @change="navChange"
      ></u-tabs-swiper> -->
    </view>
    <!-- <swiper
      class="orders-bd"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in tabs"
        :key="index"
      >
        <scroll-view
          scroll-y
          style="height: 800rpx; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <OrderItem></OrderItem>
        </scroll-view>
      </swiper-item>
    </swiper> -->
    <view class="orders-bd">
      <template v-for="item in list">
        <OrderItem
          :key="item.id"
          :item="item"
          @orderRefresh="orderRefresh"
        ></OrderItem>
      </template>
    </view>
  </view>
</template>

<script>
import { orders } from "@/utils/api";
import OrderItem from "./components/orderItem";
export default {
  components: {
    OrderItem,
  },
  data() {
    return {
      activeState: 0,
      swiperCurrent: 0,
      orderStates: [
        {
          name: "全部",
          value: "all",
        },
        {
          name: "待付款",
          value: 0,
        },
        {
          name: "待发货",
          value: 1,
        },
        {
          name: "待收货",
          value: 2,
        },
        {
          name: "已完成",
          value: 3,
        },
        {
          name: "售后",
          value: 4,
        },
      ],
      tabs: [
        {
          test: "1",
        },
        {
          test: "2",
        },
        {
          test: "3",
        },
        {
          test: "4",
        },
        {
          test: "5",
        },
      ],
      cur: 1,
      total: 0,
      list: [],
    };
  },
  onLoad({ status }) {
    this.activeState = Number(status);
    this.initOrder();
  },
  onReachBottom() {
    console.log("触底");
    if (this.cur < this.total) {
      ++this.cur;
      this.initOrder();
    }
  },
  methods: {
    initOrder() {
      var that = this;
      orders({
        status: this.orderStates[this.activeState].value,
        page: this.cur,
      }).then((resp) => {
        console.log("订单列表", resp);
        if (resp.code == 200) {
          this.total = resp.data.last_page;
          if (this.cur > 1) {
            this.list.push(...resp.data.data);
            console.log(this.list);
          } else {
            this.list = resp.data.data;
          }
        }
      });
    },
    orderRefresh() {
      this.cur = 1;
      this.list = [];
      this.initOrder();
    },
    // 切换订单状态
    navChange(index) {
      this.activeState = index;
      this.swiperCurrent = index;
      console.log("当前订单状态", index);
      this.cur = 1;
      this.list = [];
      this.initOrder();
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.activeState = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.orders {
  &-bd {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 30rpx 0 30rpx;
  }
}
</style>
